<template>
  <div class="popup">
    <van-popup
      v-model:show="rec.show"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="popup-top">
        <span>{{ rec.title }}</span>
        <svg-icon icon-class="close" @click="togglePop" />
      </div>
      <!-- 报修类型 -->
      <div class="popup-content" v-if="rec.type === 1">
        <div
          class="popup-content-item"
          v-for="item in rec.list"
          :key="item"
          @click="clickTypeItem(item.id, item.repairType)"
        >
          <span>{{ item.repairType }}</span>
          <svg-icon icon-class="checked" v-if="item.id === rec.repairType" />
        </div>
      </div>
      <!-- 所在楼栋 -->
      <div class="popup-content" v-if="rec.type === 2">
        <div
          class="popup-content-item"
          v-for="item in rec.list"
          :key="item"
          @click="clickBuildingItem(item.buildingId, item.buildingName)"
        >
          <span>{{ item.buildingName }}</span>
          <svg-icon
            icon-class="checked"
            v-if="item.buildingId === rec.buildingLocation"
          />
        </div>
      </div>
      <!-- 所在房间 -->
      <div class="popup-content" v-if="rec.type === 3">
        <div
          class="popup-content-item"
          v-for="item in rec.roomList"
          :key="item"
          @click="clickRoomItem(item.classroomId, item.classroomName)"
        >
          <span>{{ item.classroomName }}</span>
          <svg-icon
            icon-class="checked"
            v-if="item.classroomId === rec.roomLocation"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { getRooms } from "@/service/modules/repair";
const emit = defineEmits(["getPopParams"]);
const rec = reactive({
  show: false,
  type: 0,
  list: [],
  title: "",
  repairType: "",
  buildingLocation: "",
  roomLocation: "",
  roomList: [],
  classroomName: "",
  buildingName: "",
});
// 点击报修类型
const clickTypeItem = (id, name) => {
  rec.repairType = id;
  emit("getPopParams", name, 1);
};
// 点击所在楼栋
const clickBuildingItem = async (id, name) => {
  rec.buildingLocation = id;
  const { code, data } = await getRooms(2, id);
  if (code === 0) {
    rec.roomList = data;
    rec.roomLocation = "";
    emit("getPopParams", name, 2);
  }
};
// 点击所在房间
const clickRoomItem = (id, name) => {
  rec.roomLocation = id;
  emit("getPopParams", name, 3);
};
// 切换弹窗
const togglePop = (list?: Array, title?: String, type: Number) => {
  rec.show = !rec.show;
  rec.list = list;
  rec.title = title;
  rec.type = type;
};

defineExpose({
  togglePop,
  rec,
});
</script>

<style lang="less" scoped>
.popup {
  /deep/ .van-popup {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    // overflow-y: hidden;
  }
  &-top {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid #f5f5f5;
    position: fixed;
    width: 100%;
    z-index: 9;
    background: #fff;
    > span:nth-child(1) {
      font-size: 14px;
      line-height: 50px;
      font-weight: 600;
      color: #303233;
    }
    svg {
      margin-right: 6.2px;
      width: 30px;
    }
  }
  &-content {
    padding: 0 16px;
    padding-top: 50px;
    &-item {
      height: 50px !important;
      line-height: 50px;
      font-size: 14px;
      height: 20px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      align-items: center;
      svg {
        margin-right: 6.2px;
      }
    }
  }
}
</style>
